<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>客服系统</title>
    <script>
        (function (window) {//检查浏览器类型和ie版本
            var theUA = window.navigator.userAgent.toLowerCase();
            var isIE = (theUA.match(/msie\s\d+/) && theUA.match(/msie\s\d+/)[0]) || (theUA.match(/trident\s?\d+/) && theUA.match(/trident\s?\d+/)[0]);
            if (isIE) {
                //如果是IE，判断IE版本
                alert('非常抱歉！IE内核浏览器无法正常浏览该网页，请使用其他浏览器访问');
//                var ieVersion = theUA.match(/msie\s\d+/)[0].match(/\d+/)[0] || theUA.match(/trident\s?\d+/)[0];
//                if (ieVersion < 10) {
//                    alert('您的浏览器IE内核过低，可能会影响网页正常使用，建议升级或使用其他浏览器。');
//                }
            }
        })(window);
    </script>
    <link type="text/css" rel="stylesheet" href="js/emoji/jquery.emojiarea.css">
    <link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="webIm000">
    <div id="webIm" class="ub">
        <div id="navTab" class="ub ub-ver">
            <div class="loginInfo">id:9517</div>
            <div class="conScrollY ub-f">
                <div class="serverBy active" onclick="tabSelect(this)" id="111" data-count="98">分组一
                    <div class="unRead">98</div>
                </div>
                <div class="serverBy" onclick="tabSelect(this)" id="222" data-count="105">分组二
                    <div class="unRead">99+</div>
                </div>
                <div class="serverBy" onclick="tabSelect(this)" id="333" data-count="">未分组</div>
                <div class="groupManage">+ 整理</div>
            </div>
            <div class="mass">群发〼〼</div>
            <div class="exitLogin">退出登录</div>
        </div>
        <div id="navCon" class="ub ub-ver">
            <div class="conScrollY ub-f navConByTab show">
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="345" data-count="50">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">吕布</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                    <div class="unRead">50</div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="4667" data-count="30">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">赵子龙</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                    <div class="unRead">30</div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="578" data-count="17">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">曹操</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                    <div class="unRead">17</div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="673" data-count="1">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">盖伦</div>
                        <div class="span"></div>
                    </div>
                    <div class="unRead">1</div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="784">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">嘉文</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="34564">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">典韦</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="54673">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">张虎</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="4356734">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">张虎</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="2475">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">张虎</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="4567">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">张虎</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="536754">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">张虎</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="56789">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">张虎</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                </a>

                <div class="loadingMorePerson" onclick="loadingMorePerson(this);">加载更多...</div>
            </div>

            <div class="conScrollY ub-f navConByTab">
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="78976" data-count="100">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">赵龙</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                    <div class="unRead">99+</div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="6789" data-count="5">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">赵龙</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                    <div class="unRead">5</div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="4674">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">赵龙</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="45677">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">赵龙</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="9578754">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">赵龙</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="34563456">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">赵龙</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="567345">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">赵龙</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="2254645">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">赵龙</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                </a>

                <div class="loadingMorePerson" onclick="loadingMorePerson(this);">加载更多...</div>
            </div>

            <div class="conScrollY ub-f navConByTab">
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="333_111">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">马汉</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="333_222">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">马汉</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="678678">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">马汉</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="564">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">马汉</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="54678678">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">马汉</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="67777775">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">马汉</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="35675">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">马汉</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                </a>
                <a class="chatLine ub ub-ac" onclick="chat(this)" id="4356345">
                    <div class="Pic"><img src="img/src/userPicture.jpg"></div>
                    <div class="ub-f">
                        <div class="chatInfo">马汉</div>
                        <div class="span">请问，这只股怎么样？</div>
                    </div>
                </a>

                <div class="loadingMorePerson" onclick="loadingMorePerson(this);">加载更多...</div>
            </div>
        </div>
        <div id="content" class="ub-f ub ub-ver">
            <div class="head">
                <span id="chatName">
                    <!--赵龙-->
                </span>
                <span id="onlineStatus">
                    <!--<span class="out"></span>-->
                </span>
            </div>

            <div id="chatContent" class="conScrollY ub-f">

                <!--<div class="getHistory" onclick="getMoreHistory(this);">查看更多消息记录</div>-->

                <!--<div class="chatTime"><span>10:52:34</span></div>-->

                <!--<div class="chat chatLeft ub">-->
                <!--<div class="chatImg"><img src="img/src/userPicture.jpg"></div>-->
                <!--<div class="ub-f">-->
                <!--<div class="speakTime">2017-5-10 17:23:04</div>-->
                <!--<div class="chatTxt ub">-->
                <!--<div class="chatAngle"></div>-->
                <!--<span>请问，这只股怎么样？</span>-->
                <!--</div>-->
                <!--</div>-->
                <!--</div>-->

                <!--<div class="chat chatLeft ub">-->
                <!--<div class="chatImg"><img src="img/src/userPicture.jpg"></div>-->
                <!--<div class="ub-f">-->
                <!--<div class="speakTime">2017-5-10 17:23:04</div>-->
                <!--<div class="chatTxt ub">-->
                <!--<div class="chatAngle"></div>-->
                <!--<span><img class="image"-->
                <!--src="http://pic17.nipic.com/20111026/3631203_111238646000_2.jpg"></span>-->
                <!--</div>-->
                <!--</div>-->
                <!--</div>-->

                <!--<div class="chat chatRight ub">-->
                <!--<div class="ub-f">-->
                <!--<div class="speakTime">2017-5-10 17:23:04</div>-->
                <!--<div class="chatTxt ub ub-pe">-->
                <!--<div class="chatAngle"></div>-->
                <!--<span>还不错</span>-->
                <!--</div>-->
                <!--</div>-->
                <!--<div class="chatImg"><img src="img/src/serverPicture.jpg"></div>-->
                <!--</div>-->

                <!--<div class="chat chatRight ub">-->
                <!--<div class="ub-f">-->
                <!--<div class="speakTime">2017-5-10 17:23:04</div>-->
                <!--<div class="chatTxt ub ub-pe">-->
                <!--<div class="chatAngle"></div>-->
                <!--<span><img class="image" src="https://www.baidu.com/img/bd_logo1.png"></span>-->
                <!--</div>-->
                <!--</div>-->
                <!--<div class="chatImg"><img src="img/src/serverPicture.jpg"></div>-->
                <!--</div>-->

                <div style="text-align: center;margin: 150px 0 50px 0;font-size: 48px;color: #cccccc">天 鼎 投 资</div>

            </div>

            <div id="chatFooter">
                <div id="sendInputUi" style="display: none;">
                    <form class="ub ub-ac chatFooter">
                        <div class="editor">编辑</div>
                        <div class="ub-f inputArea">
                            <textarea id="chatVal" class="emojis-wysiwyg"></textarea>
                        </div>
                        <div class="chatIcon emoSend"></div>
                        <div id="textOrRich" class="chatIcon richSend"></div>
                        <input id="previewImg" type="file" onchange="uploadImg(this);" style="display: none;">
                    </form>
                </div>
            </div>

        </div>
        <div id="personInfo" class="ub ub-ver">
            <div id="personPic" class="personPic">
                <!--<img src="img/src/userPicture.jpg">-->
            </div>
            <div class="info ub-f conScrollY" id="detailInfo">
                <!--手机:17589847514<br>-->
                <!--邮箱:158685154@qq.com<br>-->
                <!--微信:wy999<br>-->
                <div style="text-align: center;margin: 80px 0 50px 0;font-size: 18px;color: #cccccc">用心帮助客户，享受幸福人生</div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/layer/layer.js"></script>
<!--<script type="text/javascript" src="js/layer_mobile/layer.js"></script>-->
<script type="text/javascript" src="js/notify/notification.js"></script>
<script type="text/javascript" src="js/emoji/jquery.emojiarea.js"></script>
<script type="text/javascript" src="js/emoji/faces5/emojis.js"></script>
<script>
    var $chatVal = $('#chatVal'), $inputDiv, $container = $('#chatContent'), $tOr = $('#textOrRich');
    $(document).ready(function () {
        $('.emojis-wysiwyg').emojiarea({wysiwyg: true});//初始化输入框，绑定表情
        $inputDiv = $('.emoji-wysiwyg-editor');
        $inputDiv.on('keydown', function (event) {
            //绑定按键
            var e = event || window.event || arguments.callee.caller.arguments[0],
                    keyCode = e.keyCode;
            if (keyCode == '13' && e.ctrlKey) {
                //ctrl+Enter发送
                e.preventDefault();
                sendMsg();
            }
        });
        $chatVal.on('change', function (event) {
            //当输入框内容改变，切换发送按钮
            var textValue = $chatVal.val();
            if (textValue) {
                if ($tOr.hasClass('richSend')) {
                    $tOr.removeClass('richSend').addClass('textSend');
                }
            } else {
                if ($tOr.hasClass('textSend')) {
                    $tOr.removeClass('textSend').addClass('richSend');
                }
            }
        });

        $(document).on('click', '.textSend', function () {
            //点击发送按钮
            sendMsg();
        });

        $(document).on('click', '.richSend', function () {
            //点击图片按钮
            $('#previewImg').click();
        });


        var isContainerScrollTop = false;
        $container.scroll(function () {
            //消息区域滚动监听，在滚动条高度为0时，
            var afterScrollTop = $container.scrollTop();
            if (afterScrollTop == 0) {
                isContainerScrollTop = true;
            } else {
                isContainerScrollTop = false;
            }
        });

        var wheelScrollFunc = function (e) {
            //消息区域鼠标滚轮事件处理
            e = e || window.event;
            var delta = e.wheelDelta ? e.wheelDelta : -e.detail;
            if (isContainerScrollTop && delta > 0) {
                //当消息区域滚动条在顶部，并且鼠标滚轮向上滚动时触发事件；设定间隔时间 rateTime 毫秒，防止滚动一次多次触发
                var wheelTime = Date.parse(new Date()), rateTime = 3000;
                if (!(localStorage.getItem('wheelTime') && wheelTime - localStorage.getItem('wheelTime') < rateTime)) {
                    localStorage.setItem('wheelTime', wheelTime);
                    getMoreHistory($(".getHistory"));
                }
            }
        };

        /*注册消息区域鼠标滚轮事件监听*/
        if (document.addEventListener) {
            //W3C
            document.getElementById('chatContent').addEventListener('DOMMouseScroll', wheelScrollFunc, false);
        }
        document.getElementById('chatContent').onmousewheel = wheelScrollFunc;//IE/Opera/Chrome

    });

    function tabSelect(e) {
        //切换tab
        var $tab = $(e), index = $tab.index(), conArr = $('#navCon').find('.navConByTab');
        if ($tab.hasClass('active'))return;
        $tab.addClass('active').siblings().removeClass('active');
        if ($(conArr[index]) && $(conArr[index]).length) {
            $(conArr[index]).addClass('show').siblings().removeClass('show');
        } else {
            console.log('缺少对应的内容');
        }
    }

    function chat(e) {
        //改变聊天对象
        var $tab = $(e);
        if ($tab.hasClass('active'))return;
        $tab.addClass('active').siblings().removeClass('active');
        $tab.parent().siblings().find('.chatLine').removeClass('active');

        unReadCount($tab, 'clear');//清理未读消息数

        var chatInfo = {
            //测试数据
            kefu_id: '',
            customer_id: '',
            customer_name: $tab.find('.chatInfo').text(),
            online_status: 'in',// 在线状态：在线-'in'；离线'out'
            customer_pic: 'img/src/userPicture.jpg',
            customer_infoHtml: '手机:17589847514<br>邮箱:158685154@qq.com<br>微信:wy999',
            messages: [
                {
                    msg_id: '',
                    head_pic: '',
                    type: '',
                    dir: 'left',
                    time: '',
                    content: '测试消息'
                },
                {
                    msg_id: '',
                    head_pic: '',
                    type: '',
                    dir: 'right',
                    time: '',
                    content: '这也是测试消息'
                }
            ]
        };
        setChatInfo(chatInfo);

    }


    function setChatInfo(obj) {
        //向页面写入聊天消息和用户信息
        var name = obj.customer_name;
        var status = obj.online_status || 'in';
        var pic = obj.customer_pic;
        var infoHtml = obj.customer_infoHtml;
        var messages = obj.messages;
        var messagesHtml = '<div class="getHistory" onclick="getMoreHistory(this);">查看更多消息记录</div>';
        $.each(messages, function (index, item) {
            //循环消息体，转换成html
            messagesHtml += returnChatHtml(item);
        });

        //向页面对应区域写入信息
        $('#chatName').html(name);
        $('#onlineStatus').html('<span class="' + status + '"></span>');
        $('#personPic').html('<img src="' + pic + '">');
        $('#detailInfo').html(infoHtml);
        $('#chatContent').html(messagesHtml);
        chatContentScrollToB();
        clearInput();
        $('#sendInputUi').css('display', 'block');
    }

    function chatContentScrollToB() {
        //聊天内容滑动到最底部
        $container.scrollTop($container[0].scrollHeight);
    }


    function sendMsg() {
        //发送消息
        var str = $.trim($chatVal.val());
        if (str) {
            var messageObj = {
                //测试数据
                msg_id: '',
                head_pic: '',
                type: '',
                time: '',
                content: str
            };
            addMsg(messageObj);//向聊天区域添加消息
            clearInput();//清空输入区域
        } else {
            clearInput();//清空输入区域
            //提示
            layer.msg('请输入内容');
//            layer.open({
//                content: '请输入内容',
//                skin: 'msg',
//                time: 2 //2秒后自动关闭
//            });
        }
    }

    function clearInput() {
        //清空输入区域，同时改变发送按钮
        $chatVal.val('');//清空输入框
        $inputDiv.html('');//清空输入框
        if ($tOr.hasClass('textSend')) {
            $tOr.removeClass('textSend').addClass('richSend');
        }
    }

    function addMsg(message) {
        //向聊天区域添加消息
        var spanHtml = returnChatHtml(message);
        $container.append(spanHtml);
        chatContentScrollToB();//聊天内容滑动到最底部
    }

    function returnChatHtml(message) {
        //解析消息，转换成html
        var dir = message.dir ? message.dir : 'right';//消息方向
        var type = message.type ? message.type : 'text';//类型
        var msg_id = message.msg_id;//id
        var head_pic = '';
        if (message.head_pic) {
            head_pic = message.head_pic;//头像
        } else {
            head_pic = dir == 'left' ? 'img/src/userPicture.jpg' : 'img/src/serverPicture.jpg';//头像
        }
        var time = message.time || (new Date()).pattern("yyyy-MM-dd hh:mm:ss");//时间
        var content = message.content;//内容
        var spanHtml = '';//定义消息html
        switch (type) {
            case 'text':
                content = strToHtmlEmoji(content);//转换表情
                if (dir == 'left') {
                    spanHtml = '<div class="chat chatLeft ub" data-msgid="' + msg_id + '">' +
                            '<div class="chatImg"><img src="' + head_pic + '"></div>' +
                            '<div class="ub-f">' +
                            '<div class="speakTime">' + time + '</div>' +
                            '<div class="chatTxt ub">' +
                            '<div class="chatAngle"></div>' +
                            '<span>' + content + '</span>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                } else {
                    spanHtml = '<div class="chat chatRight ub" data-msgid="' + msg_id + '">' +
                            '<div class="ub-f">' +
                            '<div class="speakTime">' + time + '</div>' +
                            '<div class="chatTxt ub ub-pe">' +
                            '<div class="chatAngle"></div>' +
                            '<span>' + content + '</span>' +
                            '</div>' +
                            '</div>' +
                            '<div class="chatImg"><img src="' + head_pic + '"></div>' +
                            '</div>';
                }
                break;
            case 'img':
                if (dir == 'left') {
                    spanHtml = '<div class="chat chatLeft ub" data-msgid="' + msg_id + '">' +
                            '<div class="chatImg"><img src="' + head_pic + '"></div>' +
                            '<div class="ub-f">' +
                            '<div class="speakTime">' + time + '</div>' +
                            '<div class="chatTxt ub">' +
                            '<div class="chatAngle"></div>' +
                            '<span><img class="image" src="' + content + '"></span>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                } else {
                    spanHtml = '<div class="chat chatRight ub" data-msgid="' + msg_id + '">' +
                            '<div class="ub-f">' +
                            '<div class="speakTime">' + time + '</div>' +
                            '<div class="chatTxt ub ub-pe">' +
                            '<div class="chatAngle"></div>' +
                            '<span><img class="image" src="' + content + '"></span>' +
                            '</div>' +
                            '</div>' +
                            '<div class="chatImg"><img src="' + head_pic + '"></div>' +
                            '</div>';
                }
                break;
        }
        return spanHtml;
    }

    function returnChatLineHtml(info) {
        //解析会话信息，转换成html
        var id = info.customer_id;
        var name = info.customer_name;
        var pic = info.customer_pic;
        var msg = strToHtmlEmoji(info.last_msg);
        var chatLineHtml = '<a class="chatLine ub ub-ac" onclick="chat(this)" id="' + id + '">' +
                '<div class="Pic"><img src="' + pic + '"></div>' +
                '<div class="ub-f">' +
                '<div class="chatInfo">' + name + '</div>' +
                '<div class="span">' + msg + '</div>' +
                '</div>' +
                '</a>';
        return chatLineHtml;
    }

    function uploadImg(e) {
        //图片上传
        if (e.files && e.files[0]) {
            var fileObj = e.files[0]; // 获取文件对象

            var localPath = e.value;
            var fileType = (e.value.substring(localPath.lastIndexOf("."), e.value.length)).toLowerCase();
            if ((fileType != '.jpg') && (fileType != '.gif') && (fileType != '.jpeg') && (fileType != '.png') && (fileType != '.bmp')) {
                //提示
                layer.msg('图片格式错误，请重新选择');
//                layer.open({
//                    content: '图片格式错误，请重新选择',
//                    skin: 'msg',
//                    time: 2 //2秒后自动关闭
//                });
                return;
            }

            //上传
            var formDataObj = new FormData(); // FormData对象
            formDataObj.append("file", fileObj); // 把文件对象加入FormData 对象
            //... todo ajax提交formDataObj


            //文件操作，本地图片读取，仅演示用，实际上传图片返回url地址，不需要本地读取
            var reader = new FileReader();
            reader.onload = function (evt) {
                //读取完成的监听
                var imgSrc = evt.target.result;
                var messageObj = {
                    //测试数据
                    msg_id: '',
                    head_pic: '',
                    type: 'img',
                    time: '',
                    content: imgSrc
                };
                addMsg(messageObj);//向页面添加图片
            };
            reader.readAsDataURL(fileObj);//读取本地文件

        }
    }

    function getMoreHistory(e) {
        //获取更多历史消息记录
        var $e = $(e), eHtml = $e.html();
        $e.html('<img width="15" height="15" src="img/loading.gif">');//加载动画
        setTimeout(function () {
            $e.html(eHtml);//清除加载动画
            //todo:获取数据并解析
            var historyMsgArr = [
                //测试数据
                {
                    msg_id: '',
                    head_pic: '',
                    type: '',
                    dir: '',
                    time: '',
                    content: '这是历史消息'
                },
                {
                    msg_id: '',
                    head_pic: '',
                    type: '',
                    dir: 'left',
                    time: '',
                    content: '这也是是历史消息'
                }
            ];

            var historyHtml = '';
            $.each(historyMsgArr, function (index, item) {
                historyHtml += returnChatHtml(item);
            });
            $e.after(historyHtml);//将历史消息写入页面

            //计算历史消息的高度
            var length = $(historyHtml).length, historyH = $($('.chat')[length - 1]).position().top;
            //定位滚动条
            $container.scrollTop(historyH);

        }, 1000);
    }

    function loadingMorePerson(e) {
        //获取更多客户
        var $e = $(e), eHtml = $e.html();
        $e.html('<img width="20" height="20" src="img/loading.gif">');//加载动画
        setTimeout(function () {
            $e.html(eHtml);//清除加载动画
            //todo:获取数据并解析
            var chatLineInfoArr = [
                {
                    //测试数据
                    customer_id: '',
                    customer_name: '小邓子',
                    customer_pic: 'img/src/userPicture.jpg',
                    last_msg: '你好啊，这里是测试消息中心哦哦哦哦哦哦哦哦'
                },
                {
                    //测试数据
                    customer_id: '',
                    customer_name: '小李子',
                    customer_pic: 'img/src/userPicture.jpg',
                    last_msg: '嘿嘿嘿'
                }
            ];
            var chatLineHtml = '';
            $.each(chatLineInfoArr, function (index, item) {
                chatLineHtml += returnChatLineHtml(item);

            });
            $e.before(chatLineHtml);
        }, 1000);
    }

    function onMessage(msgObj) {
        //接收消息处理，未读标记的处理
        var cusId = msgObj.customer_id;
        var cusName = msgObj.customer_name;
        var $cusId = $('#' + cusId);
        var keFuId = msgObj.kefu_id;
        var $keFuId = $('#' + keFuId);
        var customer_pic = msgObj.customer_pic || msgObj.message.head_pic;
        var last_msg = msgObj.message.type == 'img' ? '图片' : strToHtmlEmoji(msgObj.message.content);
        if ($cusId && $cusId.length) {
            //用户存在于列表中
            $cusId.find('.span').html(last_msg);//写入最新消息内容
            if ($cusId.hasClass('active')) {
                //当前会话
                addMsg(msgObj.message);
            } else {
                //非当前会话
                unReadCount($cusId);//会话设置未读消息数
                unReadCount($keFuId);//客服设置未读消息数
                var $clone = $cusId.clone(), $parent = $cusId.parent();//克隆，记住其直接父元素
                $cusId.remove();//删除
                $parent.prepend($clone);//将克隆体添加到其直接父元素的首位
            }
        } else {
            //用户不存在于列表中
            var chatLineInfo = {
                customer_id: cusId,
                customer_name: cusName,
                customer_pic: customer_pic,
                last_msg: last_msg
            };
            var chatLineHtml = returnChatLineHtml(chatLineInfo);//解析成html
            var $thisParent = $($('.navConByTab')[$keFuId.index()]);//定位其直接父元素
            $thisParent.prepend(chatLineHtml);//添加到其直接父元素的第一位
            unReadCount($thisParent.children()[0]);//第一位设置未读消息数
            unReadCount($keFuId);//客服设置未读消息数
        }

        showNotification(cusName, last_msg);//todo: 通知
    }

    function unReadCount(e, operate) {
        var $e = $(e);
        var $unRead = $e.find('.unRead');
        if (operate && operate == 'clear') {
            //清理未读消息数
            if ($unRead && $unRead.length) {
                var deCount = $e.data('count');
                $e.attr('data-count', 0);
                $e.data('count', 0);
                $unRead.remove();
                var index = $e.parent().index();
                var $server = $($('.serverBy')[index]);
                var $serverUnRead = $server.find('.unRead');
                var initCount = $server.data('count');
                var finCount = initCount - deCount;
                $server.attr('data-count', finCount);
                $server.data('count', finCount);
                var htmlCount = finCount > 99 ? '99+' : finCount;
                if (htmlCount == 0) {
                    $serverUnRead.remove();
                } else {
                    $serverUnRead.html(htmlCount);
                }
            }
        } else {
            //设置未读消息数
            if ($unRead && $unRead.length) {
                var count = $e.data('count');
                count++;
                $e.attr('data-count', count);
                $e.data('count', count);
                count = count > 99 ? '99+' : count;
                $unRead.html(count);
            } else {
                $e.attr('data-count', 1);
                $e.data('count', 1);
                $e.append('<div class="unRead">1</div>');
            }
        }
    }


    //    setInterval(function () {
    //        //打开页面每5秒，模拟接收到消息
    //        var msgObj = {
    //            //测试数据
    //            kefu_id: '333',
    //            customer_id: '333_222',
    //            customer_name: '测试',
    //            customer_pic: 'img/src/userPicture.jpg',
    //            message: {
    //                msg_id: '',
    //                head_pic: 'img/src/userPicture.jpg',
    //                type: '',
    //                dir: 'left',
    //                time: '',
    //                content: '小爱惜'
    //            }
    //        };
    //        onMessage(msgObj);
    //    }, 5000);

    $('.exitLogin').on('click', function () {
        window.location.href = 'login.html';
    });

    $('.groupManage').on('click', function () {
        layer.open({
            type: 2,//层的类型。0：信息框（默认），1：页面层，2：iframe层，3：加载层，4：tips层。
            title: ['分组管理', 'background:#414A53;color:#FFFFFF'],//控制默认标题栏。title:'标题'，自定义标题样式，可以title: ['标题', 'background:#c00;'] 第二个参数可书写任意css
            //offset: ['', ''],//[纵坐标, 横坐标]，默认为垂直水平居中
            area: ['60%', '95%'],//[宽度, 高度]
            //maxmin: true,//是否输出窗口最小化/全屏/还原按钮,默认false
            shade: [0.3, '#000'],//控制遮罩[0.5, '#000']（[透明度0~1, '色值']）,设置为false则不显示
            shadeClose: true,//遮罩显示情况下，控制点击遮罩区域是否关闭层
            anim: false,//动画类型0~6 默认0 设置false为不使用动画
            scrollbar: false,//屏蔽浏览器滚动条
            content: 'frameGroupManage.html'
        });
    });

    $('.mass').on('click', function () {
        layer.open({
            type: 2,//层的类型。0：信息框（默认），1：页面层，2：iframe层，3：加载层，4：tips层。
            title: ['群发', 'background:#414A53;color:#FFFFFF'],//控制默认标题栏。title:'标题'，自定义标题样式，可以title: ['标题', 'background:#c00;'] 第二个参数可书写任意css
            //offset: ['', ''],//[纵坐标, 横坐标]，默认为垂直水平居中
            area: ['60%', '95%'],//[宽度, 高度]
            //maxmin: true,//是否输出窗口最小化/全屏/还原按钮,默认false
            shade: [0.3, '#000'],//控制遮罩[0.5, '#000']（[透明度0~1, '色值']）,设置为false则不显示
            shadeClose: true,//遮罩显示情况下，控制点击遮罩区域是否关闭层
            anim: false,//动画类型0~6 默认0 设置false为不使用动画
            scrollbar: false,//屏蔽浏览器滚动条
            content: 'frameMass.html'
        });
    });

    $(document).on('click', '.editor', function () {
        var inputHtml = $.trim($inputDiv.html());
        localStorage.setItem('inputHtmlEditor', inputHtml);
        layer.open({
            type: 2,//层的类型。0：信息框（默认），1：页面层，2：iframe层，3：加载层，4：tips层。
            title: ['编辑器', 'background:#414A53;color:#FFFFFF'],//控制默认标题栏。title:'标题'，自定义标题样式，可以title: ['标题', 'background:#c00;'] 第二个参数可书写任意css
            //offset: ['', ''],//[纵坐标, 横坐标]，默认为垂直水平居中
            area: ['60%', '95%'],//[宽度, 高度]
//            maxmin: true,//是否输出窗口最小化/全屏/还原按钮,默认false
            shade: [0.3, '#000'],//控制遮罩[0.5, '#000']（[透明度0~1, '色值']）,设置为false则不显示
            shadeClose: true,//遮罩显示情况下，控制点击遮罩区域是否关闭层
            anim: false,//动画类型0~6 默认0 设置false为不使用动画
            scrollbar: false,//屏蔽浏览器滚动条
            content: 'editor.html'
        });
    });

    /** 对Date的扩展，将 Date 转化为指定格式的String
     * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q)可以用 1-2 个占位符
     * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
     * eg:
     * (new Date()).pattern("yyyy-MM-dd hh:mm:ss.S")==> 2006-07-02 08:09:04.423
     * (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04
     * (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04
     * (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04
     * (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
     */
    Date.prototype.pattern = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时
            "H+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        var week = {
            "0": "/u65e5",
            "1": "/u4e00",
            "2": "/u4e8c",
            "3": "/u4e09",
            "4": "/u56db",
            "5": "/u4e94",
            "6": "/u516d"
        };
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
        if (/(E+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f" : "/u5468") : "") + week[this.getDay() + ""]);
        }
        for (var k in o) {
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            }
        }
        return fmt;
    }

</script>

</body>
</html>